<template>
  <div class="search-top">
    <el-row style="display: flex; flex-wrap: wrap; padding: 10px 20px">
      <el-col v-if="false" :span="24">
        <el-radio-group v-model="typeKey" size="small">
          <el-radio-button
            v-for="item in typeList"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-radio-button
          >
        </el-radio-group>
      </el-col>

      <el-col :span="24">
        <el-checkbox-group v-model="labelKey">
          <span class="font-12">类型：</span>
          <el-checkbox
            v-for="item in typeNewList"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-checkbox
          >
          <br />
          <span class="font-12">标签：</span>
          <el-checkbox v-for="item in labelList" :key="item.value" :label="item.value">{{
            item.label
          }}</el-checkbox>
        </el-checkbox-group>
      </el-col>

      <el-col :span="24">
        <el-checkbox-group v-model="publishStatus">
          <span class="font-12">发布：</span>
          <el-checkbox
            v-for="item in publishStatusList"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-col>
    </el-row>

    <el-row style="display: flex; padding: 10px 20px">
      <div style="margin-right: 20px">
        <el-input
          placeholder="请输入内容"
          class="input-with-select"
          style="width: 500px"
          v-model="searchKey"
          @change="search"
        >
          <template #prepend>
            <el-select v-model="searchType" placeholder="请选择" style="width: 100px">
              <el-option key="keywords" label="关键词" value="keywords"></el-option>
              <el-option key="site_id" label="站点id" value="site_id"></el-option>
            </el-select>
          </template>
          <template #append>
            <el-button icon="Search" @click="search"></el-button>
          </template>
        </el-input>

        <el-button
          style="margin-left: 20px"
          v-if="typeKey.length > 0 || labelKey.length > 0 || searchKey.length > 0"
          size="small"
          round
          type="info"
          plain
          @click="
            typeKey = '';
            labelKey = [];
            searchKey = '';
            searchType = 'keywords';
          "
        >
          清除
        </el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
import { LocalStorage } from "@/utils/localstorage";
import { isArray, isObject } from "@/utils/public";
import { useWebUserStore } from "@/store/web/user";
export default {
  data() {
    return {
      typeList: [],
      typeNewList: [],
      labelList: [],

      typeKey: "", // TODO: 以后可能废除
      labelKey: [],
      searchKey: "",
      searchType: "keywords", // keywords / site_id
      publishStatus: [],
      publishStatusList: [
        {
          label: "已发布",
          value: "1",
        },
        {
          label: "未发布",
          value: "2",
        },
      ],

      H5_TYPE: {
        H5: 1,
        PC: 2,
        Canvas: 3,
        Card: 4,
      },
    };
  },
  computed: {
    userid() {
      const useWebUser = useWebUserStore();
      return useWebUser.user.userid;
    },
  },
  beforeMount() {
    const useWebUser = useWebUserStore();
    // 1. 获取 tags
    useWebUser.getSearchTagList({
      callback: (res) => {
        const data = isObject(res) && res.data ? res.data : res;
        if (isArray(data) && data[0]) {
          this.typeList = [];
          this.typeNewList = [];
          for (let key in data[0]) {
            this.typeList.push({
              label: data[0][key],
              value: this.H5_TYPE[data[0][key]],
            });

            this.typeNewList.push({
              label: data[0][key],
              value: key,
            });
          }
          this.typeList.sort((a, b) => {
            return a.value > b.value ? 1 : -1;
          });

          this.typeNewList.sort((a, b) => {
            return a.value > b.value ? 1 : -1;
          });
        }

        if (isArray(data) && data[1]) {
          this.labelList = [];
          for (let key in data[1]) {
            this.labelList.push({
              label: data[1][key],
              value: key,
            });
          }
          this.labelList.sort((a, b) => {
            return a.value > b.value ? 1 : -1;
          });
        }
      },
    });

    // 2. 获取暂存搜索键值
    this.getSearchOptions();
  },
  methods: {
    getAdminLocalStorage(getKey) {
      // get admin produ curPage
      // 定义 user 专属
      const key = "admin_" + this.userid;

      // 判断是否存在 admin  localStorage
      let adminStorage = LocalStorage.getItem(key);
      return adminStorage ? adminStorage[getKey] : undefined;
    },
    getSearchOptions() {
      const options = this.getAdminLocalStorage("options");
      this.typeKey = (options && options["h5type"]) || "";
      this.labelKey = options && options["tags"] ? options["tags"].split(",") : [];
      this.publishStatus =
        options && options["status"] ? options["status"].split(",") : [];
      this.searchType = (options && options["searchType"]) || "keywords";
      this.searchKey = (options && options[this.searchType]) || "";
    },

    search() {
      let params = {};
      params["h5type"] = this.typeKey;
      params["tags"] =
        isArray(this.labelKey) && this.labelKey.length > 0 ? this.labelKey.join(",") : "";
      params["status"] =
        isArray(this.publishStatus) && this.publishStatus.length > 0
          ? this.publishStatus.join(",")
          : "";
      params[this.searchType] = this.searchKey;
      params["searchType"] = this.searchType;
      this.$emit("search", params);
    },
  },
};
</script>

<style lang="scss">
.search-top {
  border-bottom: 1px solid #edeff2;

  .el-input__inner {
    border: 1px solid #dcdfe6;
  }
}
</style>
